<template>
  <a-row>
    <a-col :span="3">
      <leftMenu></leftMenu>
    </a-col>
    <a-col :span="2"></a-col>
    <div v-if="componentId == 'courseSelect'" class="patrolTable">
      <div
        v-for="(course, index) in patrolContent"
        :key="index"
        class="patrolCard"
        :style="{
          backgroundColor: `${courseMap[course.course.course_type]['color']}`,
        }"
        @click="goLook(course)"
      >
        <p>代课老师：{{ course.teacher.name }}</p>
        <p>课程名：{{ course.course.name }}</p>
      </div>
    </div>
    <div v-if="componentId == 'patrolContent'">
      <a-col :span="19" class="leftSlider">
        <a-card title="评教选项">
          <a-card-grid
            v-for="(item, index) in patrolLabel"
            :key="index"
            class="patrolSelect"
            @click="selectType(item)"
          >
            {{ item }}
          </a-card-grid>
        </a-card>
      </a-col>
      <a-col :span="19" class="rightSlider">
        <div class="font">
          {{ type }}
        </div>
        <div
          class="PatrolContent"
          v-for="(item, index) in filterQuestionList"
          :key="index"
        >
          <div class="question">
            {{ item.question }}
          </div>
          <a-radio-group v-model="item.answer">
            <a-radio
              v-for="(option, index) in item.options"
              :key="index"
              :value="option"
              class="option"
            >
              {{ option }}
            </a-radio>
          </a-radio-group>
        </div>
      </a-col>
    </div>
  </a-row>
</template>
<script>
import leftMenu from "../patrolLeftMenu";
import axios from "@/utils/axios";
import { mapState } from "vuex";
import courseLayout from "@/utils/userConst";

export default {
  components: { leftMenu },
  data() {
    return {
      type: "请选择评教选项",

      componentId: "courseSelect",
      patrolContent: [],
      courseMap: courseLayout.courseMap,
      // 评教信息
      patrolLabel: [
        "言语技能评价",
        "讲解技能评价",
        "导入技能的评价",
        "提问技能的评价",
        "演示技能评价",
        "板书技能评价",
        "变化技能评价",
        "课堂结束技能评价",
        "课堂组织技能评价",
        "说课量化评价",
        "评课技能评价",
        "基层课堂教学评价",
      ],
      questionList: [],
      filterQuestionList: [],
    };
  },
  computed: {
    ...mapState({
      uid: (state) => state.public.uid,
    }),
  },
  mounted() {
    this.getPatrolContent();
  },
  methods: {
    selectType(item) {
      this.type = item;
      this.filterQuestionList = this.questionList.filter((question) => {
        return question.patrolType == item;
      });
      if (this.filterQuestionList.length != 0) {
        this.filterQuestionList = this.filterQuestionList[0].message;
      }
      // 强制渲染
      this.$forceUpdate();
    },
    goLook(course) {
      console.log(
        "🚀 ~ file: patrolContent.vue ~ line 47 ~ goLook ~ course",
        course
      );
      this.questionList = course.patrolMessage;
      this.componentId = "patrolContent";
    },
    async getPatrolContent() {
      let url = "pc/v1/patrol/?userId=" + this.uid;
      let { data } = await axios.get(url);
      this.patrolContent = data.patrolMessage.map((item) => {
        return {
          lessonId: item.lessonId._id,
          course: {
            name: item.lessonId.course_id.name,
            course_type: item.lessonId.course_id.course_type,
            course_id: item.lessonId.course_id._id,
          },
          teacher: {
            name: item.lessonId.teacher_id.name,
            teacher_id: item.lessonId.teacher_id._id,
          },
          patrolMessage: item.patrolMessage,
        };
      });
      console.log(
        "🚀 ~ file: patrolContent.vue ~ line 53 ~ this.patrolContent=data.patrolMessage.map ~ this.patrolContent",
        this.patrolContent
      );
    },
  },
};
</script>
<style>
.patrolTable {
  display: flex;
  flex-direction: row;
}
.patrolCard {
  margin: 10px 10px;
  width: 15%;
  cursor: pointer;
}
.patrolCard > p {
  margin: 15% 15%;
  text-align: center;
}
.leftSlider {
  margin-left: 1%;
}
.rightSlider {
  margin-left: 1%;
  border: 1px solid rgb(231, 229, 229);
}
.question {
  margin-left: 10px;
  font-size: 18px;
}
.option {
  margin-left: 10px;
  width: 100px;
  font-size: 16px;
}
.font {
  text-align: center;
  padding: 7px;
  font-size: 22px;
}
.PatrolContent {
  padding: 4px;
}
.patrolSelect {
  width: 25%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>